<template>
  <div class="welcome">
    <template v-if="planner_state === PlannerState.UNCONFIGURED">
      {{ t('planner.unconfigured') }}
    </template>
    <template v-else-if="planner_state === PlannerState.PLANNING">
      {{ t('planner.planning') }}
    </template>
    <template v-else-if="planner_state === PlannerState.PLANNED">
      {{ t('planner.select_ships') }}
      <div class="ship-select">
        <div
          v-for="ship, i in fleet.transport_ships"
          :key="i"
          class="ship"
          :class="{
            selected: selected_ships[i]
          }"
          @click="selectShip(i)"
        >
          <img
            :src="checkbox_icon"
            alt=""
          >
          {{ ship.name }}
        </div>
      </div>
      <div class="date-select">
        <div>
          {{ t('planner.date_from') }}
        </div>
        <div>
          {{ t('planner.date_to') }}
        </div>
        <input type="date">
        <input type="date">
      </div>
      <GanttChart />
    </template>
  </div>
</template>

<script lang="ts" setup>
import checkbox_icon from '@/assets/checkbox.svg';

import GanttChart from '@/components/GanttChart.vue';

import { ref } from 'vue';

import { useI18n } from 'vue-i18n';

import { storeToRefs } from 'pinia';
import { useFleetStore } from '@/stores/fleet';

import { api, PlannerState } from '@/api';


const { t } = useI18n();
const { fleet } = storeToRefs(useFleetStore());

const selected_ships = ref<Record<number, boolean>>({});

const planner_state = ref<PlannerState | null>(null);


function selectShip(index: number) {
	if (selected_ships.value[index] !== undefined) {
		delete selected_ships.value[index];
	} else {
		selected_ships.value[index] = true;
	}
}


function fetchPlannerState() {
	api.getPlannerState().then(response => {
		planner_state.value = response.state;

		switch (response.state) {
		case PlannerState.PLANNED:
			break;
		case PlannerState.PLANNING:
			setTimeout(() => {
				fetchPlannerState();
			}, 2000);
			break;
		case PlannerState.UNCONFIGURED:
			break;
		}
	});
}


fetchPlannerState();
</script>

<style lang="scss" scoped>
.welcome {
	font-size: 20px;
	margin-bottom: 8px;

	&>.ship-select {
		margin: 8px 0;
		font-size: 16px;
		height: 300px;
		display: flex;
		flex-direction: column;
		overflow: auto;

		&>.ship {
			cursor: pointer;
			width: fit-content;
			border: 2px solid white;
			padding: 4px 8px;
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 8px;

			&>img {
				width: 16px;
				height: 16px;
				opacity: 0;
			}

			&.selected {
				&>img {
					opacity: 1;
				}
			}
		}
	}

	&>.date-select {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: min-content min-content;
		gap: 4px 16px;

		&>input[type="date"] {
			border: 2px solid black;
			font-size: 16px;
		}
	}
}
</style>